CSSè«çããããã£ã®åãè§£ãæŸã¡ãã¬ã¹ãã³ã·ãã§åœéåããããŠã§ããã¶ã€ã³ãå®çŸãæ§ã ãªæžåæ¹åãèšèªã«ã·ãŒã ã¬ã¹ã«å¯Ÿå¿ããã¬ã€ã¢ãŠãã®äœææ¹æ³ãåŠã³ãŸãã
ã°ããŒãã«ã¬ã€ã¢ãŠãã®æ§ç¯ïŒCSS è«çããããã£ã®åŸ¹åºè§£èª¬
仿¥ã®çžäºæ¥ç¶ãããäžçã§ã¯ããŠã§ããµã€ãã¯å€æ§ãªã°ããŒãã«ãªèŠèŽè
ã«å¯Ÿå¿ããå¿
èŠããããŸããããã¯ãå·Šããå³ïŒLTRïŒããå³ããå·ŠïŒRTLïŒãããã«ã¯çžŠæžããŸã§ãããŸããŸãªèšèªãšæžåæ¹åããµããŒãããããšãæå³ããŸããleftãrightãtopãbottomã®ãããªåŸæ¥ã®CSSããããã£ã¯æ¬è³ªçã«æ¹åã«äŸåããŠãããç°ãªãæžåæ¹åã«ã·ãŒã ã¬ã¹ã«é©å¿ããã¬ã€ã¢ãŠããäœæããããšãå°é£ã§ãããããã§CSSè«çããããã£ãæäžäž»ãšãªããŸãã
CSSè«çããããã£ãšã¯ïŒ
CSSè«çããããã£ã¯ãç©ççãªæ¹åã§ã¯ãªããã³ã³ãã³ãã®ãããŒã«åºã¥ããŠã¬ã€ã¢ãŠãã®æ¹åãå®çŸ©ããCSSããããã£ã®ã»ããã§ããããã«ããç»é¢ã®ç©ççãªåããæœè±¡åãããæžåæ¹åãèšè¿°æ¹åã«é¢ä¿ãªãäžè²«ããŠé©çšãããã¬ã€ã¢ãŠãã«ãŒã«ãå®çŸ©ã§ããŸãã
leftãrightãšãã芳ç¹ã§èãã代ããã«ãstartãendãšãã芳ç¹ã§èããŸããtopãbottomã®ä»£ããã«ãblock-startãblock-endãšãã芳ç¹ã§èããŸãããã©ãŠã¶ã¯ãããã®è«ççãªæ¹åããèŠçŽ ã®æžåæ¹åã«åºã¥ããŠé©åãªç©ççãªæ¹åã«èªåçã«ãããã³ã°ããŸãã
äž»èŠãªæŠå¿µïŒæžåæ¹åãšããã¹ãã®æ¹å
å ·äœçãªããããã£ã«é£ã³èŸŒãåã«ã2ã€ã®åºæ¬çãªæŠå¿µãçè§£ããããšãéèŠã§ãïŒ
æžåæ¹å (Writing Modes)
æžåæ¹åã¯ãããã¹ãã®è¡ãã¬ã€ã¢ãŠããããæ¹åãå®çŸ©ããŸããæãäžè¬çãª2ã€ã®æžåæ¹åã¯æ¬¡ã®ãšããã§ãïŒ
horizontal-tb: æ°Žå¹³æ¹åãäžããäžãžïŒè±èªãã¹ãã€ã³èªããã©ã³ã¹èªãªã©ã®æšæºïŒvertical-rl: åçŽæ¹åãå³ããå·ŠãžïŒæ¥æ¬èªãäžåœèªãªã©äžéšã®æ±ã¢ãžã¢èšèªã§äœ¿çšïŒ
vertical-lrïŒåçŽæ¹åãå·Šããå³ãžïŒã®ãããªä»ã®æžåæ¹åãååšããŸãããããŸãäžè¬çã§ã¯ãããŸããã
ããã¹ãã®æ¹å (Text Direction)
ããã¹ãã®æ¹åã¯ãè¡å ã§æåã衚瀺ãããæ¹åãæå®ããŸããæãäžè¬çãªããã¹ãã®æ¹åã¯æ¬¡ã®ãšããã§ãïŒ
ltr: å·Šããå³ãžïŒã»ãšãã©ã®èšèªã§æšæºïŒrtl: å³ããå·ŠãžïŒã¢ã©ãã¢èªãããã©ã€èªããã«ã·ã£èªãªã©ã§äœ¿çšïŒ
ãããã®ããããã£ã¯ãããããwriting-modeãšdirectionãšããCSSããããã£ã䜿çšããŠèšå®ãããŸããäŸïŒ
.rtl-example {
direction: rtl;
}
.vertical-example {
writing-mode: vertical-rl;
}
äž»èŠãªè«çããããã£
以äžã«ãæãéèŠãªCSSè«çããããã£ãšãããããç©ççãªå¯Ÿå¿ç©ãšã©ã®ããã«é¢é£ããŠãããã®å èš³ã瀺ããŸãïŒ
ããã¯ã¹ã¢ãã«ããããã£
ãããã®ããããã£ã¯ãèŠçŽ ã®ããã£ã³ã°ãããŒãžã³ãããŒããŒãå¶åŸ¡ããŸãã
margin-inline-start: LTRã§ã¯margin-leftãRTLã§ã¯margin-rightã«çžåœããŸããmargin-inline-end: LTRã§ã¯margin-rightãRTLã§ã¯margin-leftã«çžåœããŸããmargin-block-start: LTRãšRTLã®äž¡æ¹ã§margin-topã«çžåœããŸããmargin-block-end: LTRãšRTLã®äž¡æ¹ã§margin-bottomã«çžåœããŸããpadding-inline-start: LTRã§ã¯padding-leftãRTLã§ã¯padding-rightã«çžåœããŸããpadding-inline-end: LTRã§ã¯padding-rightãRTLã§ã¯padding-leftã«çžåœããŸããpadding-block-start: LTRãšRTLã®äž¡æ¹ã§padding-topã«çžåœããŸããpadding-block-end: LTRãšRTLã®äž¡æ¹ã§padding-bottomã«çžåœããŸããborder-inline-start: è«ççãªéå§èŸºã®ããŒããŒããããã£ãèšå®ããããã®ã·ã§ãŒããã³ããborder-inline-end: è«ççãªçµäºèŸºã®ããŒããŒããããã£ãèšå®ããããã®ã·ã§ãŒããã³ããborder-block-start: è«ççãªäžèŸºã®ããŒããŒããããã£ãèšå®ããããã®ã·ã§ãŒããã³ããborder-block-end: è«ççãªäžèŸºã®ããŒããŒããããã£ãèšå®ããããã®ã·ã§ãŒããã³ãã
äŸïŒ ããã¹ãã®æ¹åã«é¢ä¿ãªãäžè²«ããããã£ã³ã°ãæã€ãã¿ã³ãäœæããïŒ
.button {
padding-inline-start: 1em;
padding-inline-end: 1em;
}
é 眮ããããã£
ãããã®ããããã£ã¯ã芪èŠçŽ å ã§ã®èŠçŽ ã®äœçœ®ãå¶åŸ¡ããŸãã
inset-inline-start: LTRã§ã¯leftãRTLã§ã¯rightã«çžåœããŸããinset-inline-end: LTRã§ã¯rightãRTLã§ã¯leftã«çžåœããŸããinset-block-start: LTRãšRTLã®äž¡æ¹ã§topã«çžåœããŸããinset-block-end: LTRãšRTLã®äž¡æ¹ã§bottomã«çžåœããŸãã
äŸïŒ ã³ã³ããã®éå§èŸºãšäžèŸºãåºæºã«èŠçŽ ãé 眮ããïŒ
.element {
position: absolute;
inset-inline-start: 10px;
inset-block-start: 20px;
}
ãããŒã¬ã€ã¢ãŠãããããã£
ãããã®ããããã£ã¯ãã³ã³ããå ã®ã³ã³ãã³ãã®ã¬ã€ã¢ãŠããå¶åŸ¡ããŸãã
float-inline-start: LTRã§ã¯float: leftãRTLã§ã¯float: rightã«çžåœããŸããfloat-inline-end: LTRã§ã¯float: rightãRTLã§ã¯float: leftã«çžåœããŸããclear-inline-start: LTRã§ã¯clear: leftãRTLã§ã¯clear: rightã«çžåœããŸããclear-inline-end: LTRã§ã¯clear: rightãRTLã§ã¯clear: leftã«çžåœããŸãã
äŸïŒ ç»åãã³ã³ãã³ããããŒã®éå§äœçœ®ã«ãããŒããããïŒ
.image {
float-inline-start: left; /* LTRãšRTLã®äž¡æ¹ã§äžè²«ããèŠèŠçé
眮 */
}
ãµã€ãºããããã£
inline-size: æ°Žå¹³æžåæ¹åã§ã¯æ°Žå¹³ãµã€ãºããåçŽæžåæ¹åã§ã¯åçŽãµã€ãºã衚ããŸããblock-size: æ°Žå¹³æžåæ¹åã§ã¯åçŽãµã€ãºããåçŽæžåæ¹åã§ã¯æ°Žå¹³ãµã€ãºã衚ããŸããmin-inline-sizemax-inline-sizemin-block-sizemax-block-size
ãããã¯ç¹ã«åçŽæžåæ¹åã§äœæ¥ããéã«äŸ¿å©ã§ãã
è«çããããã£ã䜿çšããã¡ãªãã
CSSè«çããããã£ãæ¡çšããããšã«ã¯ãåœéçãªãŠã§ããã¶ã€ã³ã«ãããŠããã€ãã®éèŠãªå©ç¹ããããŸãïŒ
- åœéåïŒI18NïŒã®åäžïŒ ç°ãªãæžåæ¹åãããã¹ãã®æ¹åã«èªåçã«é©å¿ããã¬ã€ã¢ãŠããäœæããå€èšèªå¯Ÿå¿ã®ããã»ã¹ãç°¡çŽ åããŸãã
- ã¬ã¹ãã³ã·ãæ§ã®åŒ·åïŒ è«çããããã£ã¯ã¬ã¹ãã³ã·ããã¶ã€ã³ã®ååãè£å®ããããŸããŸãªç»é¢ãµã€ãºãåãã«ã·ãŒã ã¬ã¹ã«é©å¿ããã¬ã€ã¢ãŠããæ§ç¯ã§ããŸãã
- ã³ãŒãã®ä¿å®æ§ïŒ èšèªãæ¹åã«åºã¥ããè€éãªã¡ãã£ã¢ã¯ãšãªãæ¡ä»¶ä»ãã¹ã¿ã€ãªã³ã°ã®å¿ èŠæ§ãæžãããããã¯ãªãŒã³ã§ä¿å®ããããCSSãå®çŸããŸãã
- è€éãã®è»œæžïŒ ç»é¢ã®ç©ççãªåããæœè±¡åããããšã§ãã¬ã€ã¢ãŠãã«ãŒã«ã«ã€ããŠèãããããªããç°ãªãèšèªãæåéã§äžè²«ãããã¶ã€ã³ãäœæã§ããŸãã
- å°æ¥æ§ïŒ æžåæ¹åãã¬ã€ã¢ãŠãæè¡ãé²åããã«ã€ããŠãè«çããããã£ã¯ãŠã§ããã¶ã€ã³ã«å¯ŸããŠããæè»ã§é©å¿æ§ã®ããã¢ãããŒããæäŸããŸãã
å®è·µçãªäŸãšãŠãŒã¹ã±ãŒã¹
CSSè«çããããã£ã䜿çšããŠåœéåãããã¬ã€ã¢ãŠããäœæããå®è·µçãªäŸãããã€ãèŠãŠã¿ãŸãããïŒ
äŸ1ïŒããã²ãŒã·ã§ã³ã¡ãã¥ãŒã®äœæ
LTRèšèªã§ã¯ã¡ãã¥ãŒé ç®ã峿ãã«ããRTLèšèªã§ã¯å·Šæãã«ãããããã²ãŒã·ã§ã³ã¡ãã¥ãŒãèããŸãã
.nav {
display: flex;
justify-content: flex-end; /* é
ç®ãè¡ã®çµç«¯ã«æãã */
}
ãã®å Žåãflex-endã䜿çšããããšã§ãåæ¹åã«å¯ŸããŠåå¥ã®ã¹ã¿ã€ã«ãå¿
èŠãšããã«ãã¡ãã¥ãŒé
ç®ãLTRã§ã¯å³ã«ãRTLã§ã¯å·Šã«æããããŸãã
äŸ2ïŒãã£ããã€ã³ã¿ãŒãã§ãŒã¹ã®ã¹ã¿ã€ãªã³ã°
ãã£ããã€ã³ã¿ãŒãã§ãŒã¹ã§ã¯ãéä¿¡è ã®ã¡ãã»ãŒãžãå³åŽã«ãåä¿¡è ã®ã¡ãã»ãŒãžãå·ŠåŽã«è¡šç€ºãããå ŽåããããŸãïŒLTRã®å ŽåïŒãRTLã§ã¯ããããå転ãããå¿ èŠããããŸãã
.message.sender {
margin-inline-start: auto; /* éä¿¡è
ã®ã¡ãã»ãŒãžãçµç«¯ã«æŒããã */
}
.message.receiver {
margin-inline-end: auto; /* åä¿¡è
ã®ã¡ãã»ãŒãžãéå§äœçœ®ã«æŒãããïŒLTRã§ã¯å®è³ªçã«å·ŠïŒ */
}
äŸ3ïŒã·ã³ãã«ãªã«ãŒãã¬ã€ã¢ãŠãã®äœæ
LTRã§ã¯å·Šã«ç»åãå³ã«ããã¹ãã³ã³ãã³ããæã€ã«ãŒããäœæããRTLã§ã¯ãã®éã«ãªãããã«ããŸãã
.card {
display: flex;
}
.card img {
margin-inline-end: 1em;
}
ç»åã®margin-inline-endã¯ãLTRã§ã¯å³åŽã«ãRTLã§ã¯å·ŠåŽã«èªåçã«ããŒãžã³ãé©çšããŸãã
äŸ4ïŒäžè²«ããé 眮ãæã€å ¥åãã£ãŒã«ãã®åŠç
LTRã¬ã€ã¢ãŠãã§ã¯å ¥åãã£ãŒã«ãã®å³åŽã«ã©ãã«ãé 眮ããããã©ãŒã ãæ³åããŠãã ãããRTLã§ã¯ãã©ãã«ã¯å·ŠåŽã«ããã¹ãã§ãã
.form-group {
display: flex;
align-items: center;
}
.form-group label {
text-align: end;
padding-inline-end: 0.5em;
width: 100px; /* ã©ãã«ã®åºå®å¹
*/
}
.form-group input {
flex: 1;
}
`text-align: end`ã䜿çšãããšãããã¹ããLTRã§ã¯å³æããRTLã§ã¯å·Šæãã«ãªããŸãã`padding-inline-end`ã¯ãã¬ã€ã¢ãŠãã®æ¹åã«é¢ä¿ãªãäžè²«ããã¹ããŒã¹ãæäŸããŸãã
ç©çããããã£ããè«çããããã£ãžã®ç§»è¡
æ¢åã®ã³ãŒãããŒã¹ãè«çããããã£ã䜿çšããããã«ç§»è¡ããã®ã¯å€§å€ã«æãããããããŸããããããã¯æ®µéçãªããã»ã¹ã§ãã以äžã«æšå¥šãããã¢ãããŒãã瀺ããŸãïŒ
- æ¹åã«äŸåããã¹ã¿ã€ã«ãç¹å®ããïŒ ãŸãã
leftãrightãmargin-leftãmargin-rightãªã©ã®ç©çããããã£ã䜿çšããŠããCSSã«ãŒã«ãç¹å®ããŸãã - è«çããããã£ã®åçç©ãäœæããïŒ æ¹åäŸåã®åã«ãŒã«ã«å¯ŸããŠãè«çããããã£ã䜿çšããŠå¯Ÿå¿ããã«ãŒã«ãäœæããŸãïŒäŸïŒ
margin-leftãmargin-inline-startã«çœ®ãæããïŒã - 培åºçã«ãã¹ãããïŒ LTRãšRTLã®äž¡æ¹ã®ã¬ã€ã¢ãŠãã§å€æŽããã¹ãããæ°ããè«çããããã£ãæ£ããæ©èœããŠããããšã確èªããŸãããã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠRTLç°å¢ãã·ãã¥ã¬ãŒãã§ããŸãã
- ç©çããããã£ã段éçã«çœ®ãæããïŒ è«çããããã£ãæ£ããæ©èœããŠãããšç¢ºä¿¡ã§ããããå ã®ç©çããããã£ãåŸã ã«åé€ããŸãã
- CSS倿°ã掻çšããïŒ å
±éã®ã¹ããŒã·ã³ã°ããµã€ãžã³ã°ã®å€ãå®çŸ©ããããã«CSS倿°ã䜿çšããããšãæ€èšããŠãã ãããããã«ãããã¹ã¿ã€ã«ã®ç®¡çãšæŽæ°ã容æã«ãªããŸããäŸïŒ
:root { --spacing-inline: 1em; } .element { margin-inline-start: var(--spacing-inline); margin-inline-end: var(--spacing-inline); }
ãã©ãŠã¶ã®ãµããŒã
CSSè«çããããã£ã¯ãChromeãFirefoxãSafariãEdgeãªã©ã®ææ°ã®ãã©ãŠã¶ã§åªãããµããŒãããããŸãããã ããå€ããã©ãŠã¶ã§ã¯ãã€ãã£ãã«ãµããŒããããŠããªãå ŽåããããŸããå€ããã©ãŠã¶ãšã®äºææ§ã確ä¿ããããã«ãcss-logical-propsã®ãããªããªãã£ã«ã©ã€ãã©ãªã䜿çšã§ããŸãã
é«åºŠãªãã¯ããã¯
CSS Gridããã³Flexboxãšã®çµã¿åãã
è«çããããã£ã¯CSS GridãFlexboxãšã·ãŒã ã¬ã¹ã«é£æºããç°ãªãæžåæ¹åã«é©å¿ããè€éã§ã¬ã¹ãã³ã·ããªã¬ã€ã¢ãŠããäœæã§ããŸããäŸãã°ãFlexboxã§justify-content: startãšjustify-content: endã䜿çšããŠãé
ç®ãã³ã³ããã®è«ççãªéå§äœçœ®ãšçµäºäœçœ®ã«ããããæããããšãã§ããŸãã
ã«ã¹ã¿ã ããããã£ïŒCSS倿°ïŒãšã®äœ¿çš
äžèšã§ç€ºããããã«ãCSS倿°ã¯è«çããããã£ã®ã³ãŒããããã«ä¿å®ãããããèªã¿ãããããããšãã§ããŸããå ±éã®ã¹ããŒã·ã³ã°ãšãµã€ãžã³ã°ã®å€ã倿°ãšããŠå®çŸ©ããã¹ã¿ã€ã«ã·ãŒãå šäœã§åå©çšããŸãã
JavaScriptã§æžåæ¹åãšæ¹åãæ€åºãã
å Žåã«ãã£ãŠã¯ãJavaScriptã䜿çšããŠçŸåšã®æžåæ¹åãæ¹åãæ€åºããå¿
èŠããããããããŸãããgetComputedStyle()ã¡ãœããã䜿çšããŠwriting-modeããã³directionããããã£ã®å€ãååŸã§ããŸãã
ãã¹ããã©ã¯ãã£ã¹
- è«çããããã£ãåªå ããïŒ å¯èœãªéãç©çããããã£ã®ä»£ããã«è«çããããã£ã䜿çšããã¬ã€ã¢ãŠããç°ãªãæžåæ¹åã«é©å¿ã§ããããã«ããŸãã
- ç°ãªãèšèªã§ãã¹ãããïŒ LTRããã³RTLèšèªãå«ãããŸããŸãªèšèªã§ãŠã§ããµã€ãããã¹ãããã¬ã€ã¢ãŠããæ£ããæ©èœããŠããããšã確èªããŸãã
- å€ããã©ãŠã¶ã«ã¯ããªãã£ã«ã䜿çšããïŒ ããªãã£ã«ã©ã€ãã©ãªã䜿çšããŠãå€ããã©ãŠã¶ã§è«çããããã£ããµããŒãããŸãã
- ã¢ã¯ã»ã·ããªãã£ãèæ ®ããïŒ æžåæ¹åãæ¹åã«é¢ä¿ãªããé害ãæã€ãŠãŒã¶ãŒãã¬ã€ã¢ãŠãã«ã¢ã¯ã»ã¹ã§ããããã«ããŸãã
- äžè²«æ§ãä¿ã€ïŒ è«çããããã£ã䜿ãå§ããããæ··ä¹±ãé¿ããä¿å®æ§ã確ä¿ããããã«ããããžã§ã¯ãå šäœã§äžè²«æ§ãç¶æããŸãã
- ã³ãŒããææžåããïŒ ãªãè«çããããã£ã䜿çšããŠããã®ããããããã©ã®ããã«æ©èœããã®ãã説æããããã«ãCSSã«ã³ã¡ã³ãã远å ããŸãã
çµè«
CSSè«çããããã£ã¯ãã¬ã¹ãã³ã·ãã§åœéåããããŠã§ãã¬ã¢ãŠããäœæããããã®åŒ·åãªããŒã«ã§ããæžåæ¹åãšããã¹ãã®æ¹åã®åºæ¬çãªæŠå¿µãçè§£ããCSSã§è«çããããã£ãæ¡çšããããšã§ãã°ããŒãã«ãªèŠèŽè ã«å¯Ÿå¿ããç°ãªãèšèªãæåéã§äžè²«ãããŠãŒã¶ãŒäœéšãæäŸãããŠã§ããµã€ããæ§ç¯ã§ããŸããè«çããããã£ã®åãåãå ¥ãããŠã§ãéçºã®ã¯ãŒã¯ãããŒã§æ°ããªã¬ãã«ã®æè»æ§ãšä¿å®æ§ãè§£ãæŸã¡ãŸããããå°ããå§ããå®éšããæ¢åã®ãããžã§ã¯ãã«åŸã ã«çµã¿èŸŒãã§ãã ãããããã«ãããé©å¿æ§ãé«ããã°ããŒãã«ãæèãããŠã§ããã¶ã€ã³ã®ã¢ãããŒãã®å©ç¹ããããã§ãããããŠã§ãããŸããŸãã°ããŒãã«ã«ãªãã«ã€ããŠããããã®æè¡ã®éèŠæ§ã¯å¢ãã°ããã§ãã
åèè³æ
- MDN Web Docs: CSS è«çããããã£ãšå€
- CSS è«çããããã£ãšå€ ã¬ãã«1 (W3C 仿§)
- è«çããããã£ã®å®å šã¬ã€ã
- CSSè«çããããã£ã§ã¬ã€ã¢ãŠããå¶åŸ¡ãã
- RTLCSS: å·Šããå³ïŒLTRïŒã®ã«ã¹ã±ãŒãã£ã³ã°ã¹ã¿ã€ã«ã·ãŒãïŒCSSïŒãå³ããå·ŠïŒRTLïŒã«å€æããããã»ã¹ãèªååããŸãã